<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/15 0015
  Time: 18:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #body1
        {
            animation-name: move1;
            animation-duration: 60s;
            animation-iteration-count: infinite;
        }
        @keyframes move1 {
            0% {background-image: url("static/images/bj1.jpg");}
            30% {background-image: url("static/images/bj2.jpg");}
            60% {background-image: url("static/images/bj3.jpg");}
            100% {background-image: url("static/images/bj4.jpg");}

        }
    </style>


</head>
<body id="body1">

<table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <th width="120" height="20"  valign="middle" bgcolor="#66FF00">
            <h3>丛林勇者</h3>
        </th>
    <tr>
    <tr>
        <th width="120" height="20"  valign="middle" >
            <div style="float:left">
                <div style="float:right">
                    <audio controls loop>
                        <source src="/music/02.mp3" type="audio/mpeg"  >
                    </audio>
                </div>
                <audio controls autoplay loop>
                    <source src="/music/01.mp3" type="audio/mpeg" >
                </audio>
            </div>
        </th>
    </tr>
</table>

<script>
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 1000;
    canvas.height = 480;
    document.body.appendChild(canvas);

    var bgReady = false;
    var bgImage = new Image();
    bgImage.onload = function () {bgReady = true;};
    bgImage.src = "images/background.png";

    var zdReady = false;
    var zdImage = new Image();
    zdImage.onload = function () {zdReady = true;};
    zdImage.src = "images/zd.png";

    var heroReady = false;
    var heroImage = new Image();
    heroImage.onload = function () {heroReady = true;};
    heroImage.src = "images/hero.png";

    var monsterReady = false;
    var monsterImage = new Image();
    monsterImage.onload = function () {monsterReady = true;};
    monsterImage.src = "images/monster.png";

    var monsterReady2 = false;
    var monsterImage2 = new Image();
    monsterImage2.onload = function () {monsterReady2 = true;};
    monsterImage2.src = "images/monster2.png";
    var hero = { speed: 256 ,x: 670,y: 240};

    var monster = {i:1, k:1,f:1,pz:1};
    var monster2 = {x:450,y:30,i:1};
    var zd = {x:-100,y:0,i:1};
    var monstersCaught = 0;
    var sibai=3;

    var keysDown = {};

    addEventListener("keydown", function (e) {keysDown[e.keyCode] = true;}, false);

    addEventListener("keyup", function (e) {delete keysDown[e.keyCode];}, false);

    var reset = function ()
    {
        monster.i=monster.i*(-1);
        monster.x = 450 + (Math.random() * (400));
        monster.y =20+(Math.random() * (80));
    };

    var update = function (modifier)
    {
        if (38 in keysDown)
        {
            hero.y -= hero.speed * modifier;
        }
        if (40 in keysDown)
        {
            hero.y += hero.speed * modifier;
        }
        if (37 in keysDown)
        {
            hero.x -= hero.speed * modifier;
        }
        if (39 in keysDown)
        {
            hero.x += hero.speed * modifier;
        }
        if (32 in keysDown)
        {
            if(zd.i===1)
            {
                zd.x=hero.x;
                zd.y=hero.y;
                zd.i=0;
            }

        }
        if(monster.y>440)
        {
            monster.x = 432 + (Math.random() * (400));
            monster.y = 30;

            monster.i=monster.i*(-1);
            --sibai;
        }
        else
        {
            monster.y+=monster.f;
            monster.x+=monster.i;
            monster.k++;
            if(monster.k%150<=50)
            {
                monster.i=monster.i*(-1);
                monster.k+=monster.y;
            }

        }



        if(monster2.y>440)
        {
            monster2.x=450 + (Math.random() * (400));
            monster2.y=60;
        }
        else
        {
            monster2.y+=monster.f;
            monster2.x+=monster2.i;
            if(monster.k%200<=60)
            {
                monster2.i=monster2.i*(-1);
            }
        }



        if( monster.x<=440||monster.x>=850)
        {
            monster.i=monster.i*(-1);
        }
        if( monster2.x<=440||monster2.x>=850)
        {
            monster2.i=monster2.i*(-1);
        }
        if ( hero.x <= (monster.x + 160)
            && monster.x <= (hero.x + 160)
            && hero.y <= (monster.y + 160)
            && monster.y <= (hero.y + 160)
            &&monster.k%200<=10 )
        {
            monster.i=monster.i*(-1);
        }
        if ( hero.x <= (monster.x + 32)
            && monster.x <= (hero.x + 32)
            && hero.y <= (monster.y + 32)
            && monster.y <= (hero.y + 32) )
        {
            ++monstersCaught;
            monster.pz=0;
            reset();
        }
        if ( hero.x <= (monster2.x + 32)
            && monster2.x <= (hero.x + 32)
            && hero.y <= (monster2.y + 32)
            && monster2.y <= (hero.y + 32) )
        {
            sibai--;
            monster2.x=500;
            monster2.y=60;
        }
        if ( monster2.x <= (zd.x + 30)
            && zd.x <= (monster2.x + 30)
            && monster2.y <= (zd.y + 30)
            && zd.y <= (monster2.y + 30) )
        {
            monstersCaught=monstersCaught+5;
            monster.pz===0;
            monster2.x=500;
            monster2.y=60;
            zd.x=-100;
            zd.i=1;
        }
        if ( monster.x <= (zd.x + 30)
            && zd.x <= (monster.x + 30)
            && monster.y <= (zd.y + 30)
            && zd.y <= (monster.y + 30) )
        {
            ++monstersCaught;
            monster.pz=0;
            reset();
            zd.x=-100;
            zd.i=1;
        }
        if( monstersCaught%5===0&& monster.pz===0)
        {
            monster.f+=0.5;
            monster.pz=1;
        }

    };

    var render = function ()
    {
        if(sibai===0)
        {
            ctx.fillText("失败", 600,200);
            ctx.fillText("分数: " + monstersCaught,600,250);
        }
        else
        {
            if (bgReady)
            {
                ctx.drawImage(bgImage, 380, 0);
            }
            if (zdReady)
            {
                ctx.drawImage(zdImage, zd.x, zd.y);
            }
            if (heroReady)
            {
                ctx.drawImage(heroImage, hero.x, hero.y);
            }

            if (monsterReady)
            {
                ctx.drawImage(monsterImage, monster.x, monster.y);
            }
            if (monsterReady)
            {
                ctx.drawImage(monsterImage2, monster2.x, monster2.y);
            }

            ctx.fillText("分数: " + monstersCaught+"  生命："+sibai, 420,0,450,0);
        }



        ctx.fillStyle = "rgb(250, 250, 250)";
        ctx.font = "24px Helvetica";
        ctx.textAlign = "left";
        ctx.textBaseline = "top";

    };

    var main = function ()
    {
        var now = Date.now();
        var delta = now - then;

        update(delta / 1000);
        render();

        then = now;
        if(sibai!==0)
            requestAnimationFrame(main);

    };

    var w = window;
    requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

    var then = Date.now();
    reset();
    main();
</script>

</body>
</html>

